<template>
  <div class="bottom-left">
    <div class="chart-title">数据分布概览</div>
    <div class="pie-3-row">
      <div class="pie-row" key="pie0">
        <div class="chart-op">
          <div class="chart-pie" id="pie0" ref="pie0" key="pie0"></div>
          <div class="title-pie">{{ '年龄分布' }}</div>
        </div>
        <div class="chart-desc">
          <div
            class="desc-row"
            v-for="(v, k, i) in data.loan_age"
            :key="`bar${i}}`"
          >
            <span
              class="circle"
              :style="{ backgroundColor: colorConfig[i] }"
            ></span>
            <span class="desc-title">{{ dataConfig['loan_age'][k] }}</span>
            <div class="desc-bar">
              <div
                class="desc-bar-ins"
                :style="{
                  backgroundColor: colorConfig[i],
                  width: Math.ceil(v * 100) + '%'
                }"
              ></div>
            </div>
            <span class="desc-per">{{ Math.ceil(v * 100) + '%' }}</span>
          </div>
        </div>
      </div>
      <div class="pie-row" key="pie1">
        <div class="chart-op">
          <div class="chart-pie" id="pie1" ref="pie1" key="pie1"></div>
          <div class="title-pie">{{ '借款金额分布' }}</div>
        </div>
        <div class="chart-desc">
          <div
            class="desc-row"
            v-for="(v, k, i) in data.loan_amount"
            :key="`bar${i}}`"
          >
            <span
              class="circle"
              :style="{ backgroundColor: colorConfig[i] }"
            ></span>
            <span class="desc-title">{{ dataConfig['loan_amount'][k] }}</span>
            <div class="desc-bar">
              <div
                class="desc-bar-ins"
                :style="{
                  backgroundColor: colorConfig[i],
                  width: Math.ceil(v * 100) + '%'
                }"
              ></div>
            </div>
            <span class="desc-per">{{ Math.ceil(v * 100) + '%' }}</span>
          </div>
        </div>
      </div>
      <div class="pie-row" key="pie2">
        <div class="chart-op">
          <div class="chart-pie" id="pie2" ref="pie2" key="pie2"></div>
          <div class="title-pie">{{ '利率区间分布' }}</div>
        </div>
        <div class="chart-desc">
          <div
            class="desc-row"
            v-for="(v, k, i) in data.loan_day_rate"
            :key="`bar${i}}`"
          >
            <span
              class="circle"
              :style="{ backgroundColor: colorConfig[i] }"
            ></span>
            <span class="desc-title">{{ dataConfig['loan_day_rate'][k] }}</span>
            <div class="desc-bar">
              <div
                class="desc-bar-ins"
                :style="{
                  backgroundColor: colorConfig[i],
                  width: Math.ceil(v * 100) + '%'
                }"
              ></div>
            </div>
            <span class="desc-per">{{ Math.ceil(v * 100) + '%' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import EchartConfig from './pie'
const dataConfig = {
  loan_age: {
    '0': '30岁以下',
    '30': '30-39岁',
    '40': '40-49岁',
    '50': '50岁以上'
  },
  loan_amount: {
    '0': '1万以下',
    '1': '1万-3万',
    '3': '3万-5万',
    '5': '5万-10万',
    '10': '10万以上'
  },
  loan_day_rate: {
    '0': '0-万2',
    '2': '万2-万3',
    '3': '万3-万4',
    '4': '万4-万5',
    '5': '万5以上'
  }
}
const colorConfig = ['#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8c']
@Component({
  name: 'bottom-left',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({
    default: {
      // 数据分布
      loan_age: {
        // 年龄分布
        '0': 0,
        '30': 0,
        '40': 0,
        '50': 0
      },
      loan_amount: {
        // 借款金额分布
        '0': 0.75,
        '1': 0,
        '3': 0.25,
        '5': 0,
        '10': 0
      },
      loan_day_rate: {
        // 利率分布
        '0': 0,
        '2': 0.25,
        '3': 0,
        '4': 0,
        '5': 0.75
      }
    }
  })
  private data!: any
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private dataConfig: any = dataConfig
  private colorConfig = colorConfig
  private titleConfig = {
    loan_age: '年龄分布',
    loan_amount: '借款金额分布',
    loan_day_rate: '利率区间分布'
  }
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    if (this.$refs.pie0) {
      let data = this.getSeriesData('loan_age')
      let chart = new EchartConfig('pie0')
      chart.setOption(data)
    }
    if (this.$refs.pie1) {
      let data = this.getSeriesData('loan_amount')
      let chart = new EchartConfig('pie1')
      chart.setOption(data)
    }
    if (this.$refs.pie2) {
      let data = this.getSeriesData('loan_day_rate')
      let chart = new EchartConfig('pie2')
      chart.setOption(data)
    }
  }
  @Watch('data')
  private ondataChange(val: any) {
    console.log(val)
    this.$nextTick(() => {
      if (this.$refs.pie0) {
        let data = this.getSeriesData('loan_age')
        let chart = new EchartConfig('pie0')
        chart.setOption(data)
      }
      if (this.$refs.pie1) {
        let data = this.getSeriesData('loan_amount')
        let chart = new EchartConfig('pie1')
        chart.setOption(data)
      }
      if (this.$refs.pie2) {
        let data = this.getSeriesData('loan_day_rate')
        let chart = new EchartConfig('pie2')
        chart.setOption(data)
      }
    })
  }
  private methodExp() {
    // method创建地方
  }
  private getSeriesData(str: string) {
    let tempData: any[] = []
    Object.keys(this.data[str]).forEach((item, index) => {
      tempData.push({
        name: this.dataConfig[str][item],
        value: this.data[str][item],
        itemStyle: {
          color: colorConfig[index]
        }
      })
    })
    return tempData
  }
}
</script>

<style lang="scss" scoped>
.bottom-left {
  width: 4.08em;
  height: 5.31em;
  background: url('./../../../../assets/dashboard/bottom-chart.png') no-repeat
    center;
  background-size: cover;
  border-radius: 0.14em;
  &:hover {
    cursor: pointer;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }
  .chart-title {
    font-size: 0.2em;
    height: 2.5em;
    color: #2fd5ff;
    font-family: FZHei-B01S;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .pie-3-row {
    height: 4.45em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .pie-row {
      width: 100%;
      display: flex;
      padding: 0 0.22em;
      height: 1.3em;
      justify-content: space-between;
      .chart-op {
        .chart-pie {
          height: 1em;
          width: 1em;
        }
        .title-pie {
          margin-top: 0.9em;
          font-size: 0.12em;
          font-weight: 200;
          color: #fff;
          text-align: center;
        }
      }
      .chart-desc {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.6em;
        .desc-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          margin-top: 0.12em;
          .circle {
            height: 0.1em;
            width: 0.1em;
            border-radius: 50%;
            margin-right: 0.08em;
            background-color: #fff;
          }
          .desc-title {
            font-size: 0.14em;
            color: #fff;
            width: 4.3em;
            overflow: visible;
            font-weight: 300;
          }
          .desc-bar {
            height: 0.12em;
            width: 1.02em;
            border: 0.01em solid #2fa4ba;
            margin: 0 0.15em;
            padding: 0.01em;
            border-radius: 0.08em;
            .desc-bar-ins {
              width: 0%;
              height: 0.08em;
              border-radius: 0.06em;
              transition: all 0.5s;
            }
          }
          .desc-per {
            font-size: 0.14em;
            color: #8c8c8c;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>
